<div class="grid m-0">
    <app-rename-app-dialog
        [appId]="appTab.app.id"
        [appName]="appTab.app.name"
        [existingApps]="existingApps"
        [existingMachines]="existingMachines"
        [(visible)]="appRenameDialogVisible"
        (submitted)="handleRenameDialogSubmitted($event)"
        (hidden)="handleRenameDialogHidden()"
    >
    </app-rename-app-dialog>
    <div class="pl-0 pr-0 pb-4 col-12">
        <p-panel>
            <p-header>
                <div class="flex justify-content-between flex-wrap gap-2">
                    <div class="text-2xl font-bold text-primary-600">
                        <i class="fa fa-server pr-2"></i> {{ appTab.app.name }}
                        <i
                            *ngIf="!showRenameDialogClicked"
                            class="pi pi-pencil vertical-align-text-top ml-1 text-gray-400 cursor-pointer"
                            id="rename-app-icon"
                            (click)="showRenameAppDialog()"
                        ></i>
                        <p-progressSpinner
                            *ngIf="showRenameDialogClicked"
                            [style]="{ width: '25px', height: '25px' }"
                            styleClass="app-rename-spinner"
                            strokeWidth="6"
                        ></p-progressSpinner>
                    </div>
                    <button
                        type="button"
                        pButton
                        label="Refresh App"
                        id="refresh-app-button"
                        icon="pi pi-refresh"
                        (click)="refreshAppState()"
                    ></button>
                </div>
            </p-header>
            <app-app-overview [app]="appTab.app"></app-app-overview>
        </p-panel>
    </div>
    <div class="p-0 col-12">
        <p-tabView [(activeIndex)]="activeTabIndex" styleClass="daemon-tabs" [scrollable]="true">
            <p-tabPanel *ngFor="let daemon of daemons; let i = index" [selected]="i === activeTabIndex">
                <ng-template pTemplate="header">
                    <div>
                        <span class="pi {{ daemonStatusIconName(daemon) }}" style="font-weight: bold"></span>
                        <span style="margin-right: 0.5em; font-weight: bold">
                            {{ daemon.niceName }}
                        </span>
                    </div>
                </ng-template>

                <ng-template pTemplate="content">
                    <div class="flex flex-wrap px-2 border-1 border-round surface-border">
                        <div class="mr-5 my-2 flex align-items-center">
                            <p-inputSwitch
                                [ngModel]="daemon.monitored"
                                (onChange)="changeMonitored(daemon)"
                                inputId="monitored-switch"
                            ></p-inputSwitch>
                            <label for="monitored-switch" class="ml-2 my-auto">Monitoring</label>
                        </div>
                        <button
                            *ngIf="isDhcpDaemon(daemon)"
                            routerLink="/dhcp/hosts"
                            [queryParams]="{ appId: appTab.app.id }"
                            label="Host Reservations"
                            icon="fa fa-laptop"
                            class="p-button-secondary mr-2 my-2"
                            type="button"
                            pButton
                        ></button>
                        <button
                            *ngIf="isDhcpDaemon(daemon)"
                            routerLink="/dhcp/subnets"
                            [queryParams]="{ appId: appTab.app.id }"
                            label="Subnets"
                            icon="fa fa-project-diagram"
                            type="button"
                            class="p-button-secondary mr-2 my-2"
                            pButton
                        ></button>
                        <button
                            *ngIf="isDhcpDaemon(daemon)"
                            routerLink="/dhcp/shared-networks"
                            [queryParams]="{ appId: appTab.app.id }"
                            label="Shared Networks"
                            icon="fa fa-network-wired"
                            class="p-button-secondary mr-2 my-2"
                            type="button"
                            pButton
                        ></button>
                        <button
                            *ngIf="isDhcpDaemon(daemon)"
                            routerLink="/apps/kea/{{ appTab.app.id }}/daemons/{{ daemon.id }}/global-config"
                            label="Global Configuration"
                            icon="fa-solid fa-globe"
                            class="p-button-secondary mr-2 my-2"
                            type="button"
                            pButton
                        ></button>
                        <!-- Using anchor tag allows to open page in new tab by hold Ctrl and click on it -->
                        <a
                            label="Raw configuration"
                            icon="fa fa-file-alt"
                            class="block p-button p-button-secondary mr-2 my-2 no-underline"
                            type="button"
                            routerLink="/apps/kea/{{ appTab.app.id }}/daemons/{{ daemon.id }}/config"
                            pButton
                        ></a>
                    </div>

                    <div class="grid" style="padding: 12px">
                        <!-- box with error message if there is communication issue or other problem with daemon -->
                        <div *ngIf="daemon.statusErred" class="col-12 xl:col-4">
                            <p-message severity="error" text="{{ daemonStatusErrorText(daemon) }}"></p-message>
                        </div>
                        <div *ngIf="daemon.statusErred" class="hidden xl:block xl:col-8">
                            <!-- fill horizontally all 12 cols -->
                        </div>

                        <!-- warning about not-active and not-monitored -->
                        <div *ngIf="!daemon.active" class="col-12 xl:col-4">
                            <p-messages *ngIf="!daemon.monitored && isNeverFetchedDaemon(daemon)" severity="warn">
                                <ng-template pTemplate>
                                    <i class="pi pi-exclamation-triangle"></i>
                                    <div class="ml-2">
                                        <p>
                                            This daemon is currently not monitored by Stork. The daemon was never
                                            running correctly (was never active) since it was added to Stork server. The
                                            configuration for this daemon was detected in the Kea Control Agent's
                                            configuration file. That's why it appears on the list of daemons.
                                        </p>
                                        <p>
                                            If the daemon is operational (e.g., it allocates leases), make sure it has
                                            the <code>control-socket</code> entry in its configuration file.
                                            <!-- The daemon version is unknown. -->
                                            <a
                                                *ngIf="daemon.name === 'dhcp4'"
                                                href="https://kea.readthedocs.io/en/latest/arm/dhcp4-srv.html#management-api-for-the-dhcpv4-server"
                                                target="_blank"
                                                >See Kea ARM</a
                                            >
                                            <a
                                                *ngIf="daemon.name === 'dhcp6'"
                                                href="https://kea.readthedocs.io/en/latest/arm/dhcp6-srv.html#management-api-for-the-dhcpv6-server"
                                                target="_blank"
                                                >See Kea ARM</a
                                            >
                                            <a
                                                *ngIf="daemon.name === 'd2'"
                                                href="https://kea.readthedocs.io/en/latest/arm/ddns.html#management-api-for-the-d2-server"
                                                target="_blank"
                                                >See Kea ARM</a
                                            >
                                            .
                                        </p>
                                    </div>
                                </ng-template>
                            </p-messages>

                            <p-message
                                *ngIf="!daemon.monitored && !isNeverFetchedDaemon(daemon)"
                                severity="warn"
                                text="This daemon is currently not monitored by Stork.
                                      The daemon was manually disabled."
                            >
                            </p-message>
                            <p-message
                                *ngIf="daemon.monitored"
                                severity="error"
                                text="There is observed issue in communication with the daemon."
                            >
                            </p-message>
                        </div>
                        <div *ngIf="!daemon.active" class="hidden xl:block xl:col-8">
                            <!-- fill horizontally all 12 cols -->
                        </div>

                        <div class="col-12 xl:col-7">
                            <!-- Overview -->
                            <div style="margin-bottom: 20px" [ngClass]="{ disabled: !daemon.active }">
                                <h3>Overview</h3>
                                <div class="grid">
                                    <div class="col-12 lg:col-7">
                                        <p-fieldset legend="Daemon Information">
                                            <div class="grid">
                                                <div class="col-12 sm:col-3 pb-0 font-medium">Version</div>
                                                <div class="col-12 sm:col-9">{{ daemon.version }}</div>
                                                <div class="col-12 sm:col-3 pb-0 font-medium">Version Ext</div>
                                                <div class="col-12 sm:col-9" [innerHTML]="daemon.extendedVersion"></div>
                                                <div class="col-12 sm:col-3 pb-0 font-medium">Uptime</div>
                                                <div class="col-12 sm:col-9">{{ showDuration(daemon.uptime) }}</div>
                                                <div class="col-12 sm:col-3 pb-0 font-medium">Last Reloaded At</div>
                                                <div class="col-12 sm:col-9">
                                                    {{ daemon.reloadedAt | localtime | placeholder: 'never' }}
                                                </div>
                                            </div>
                                        </p-fieldset>
                                    </div>
                                    <div class="col-12 lg:col-5">
                                        <p-fieldset id="hooks-fieldset" legend="Hooks">
                                            <ol class="pl-3">
                                                <li *ngFor="let hook of daemon.hooks" class="word-break-all">
                                                    <div class="flex flex-wrap">
                                                        <div
                                                            class="flex flex-auto hook-name"
                                                            pTooltip="Click to copy the hook path to the clipboard"
                                                            (click)="copyHookPathToClipboard(hook)"
                                                            appendTo="target"
                                                        >
                                                            {{ basename(hook) }}
                                                        </div>
                                                        <div class="flex flex-none">
                                                            <a
                                                                *ngIf="
                                                                    docAnchorFromHookLibrary(
                                                                        basename(hook),
                                                                        daemon.version
                                                                    )
                                                                "
                                                                href="https://kea.readthedocs.io/en/{{
                                                                    docAnchorFromHookLibrary(
                                                                        basename(hook),
                                                                        daemon.version
                                                                    )
                                                                }}"
                                                                target="_blank"
                                                            >
                                                                [doc]
                                                            </a>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ol>
                                            <div *ngIf="daemon.hooks.length === 0" class="text-gray-400">No hooks</div>
                                        </p-fieldset>
                                    </div>
                                </div>
                            </div>

                            <!-- Database Configurations -->
                            <div
                                id="data-storage-div"
                                *ngIf="
                                    (daemon.files && daemon.files.length > 0) ||
                                    (daemon.backends && daemon.backends.length > 0)
                                "
                                style="margin-bottom: 20px"
                            >
                                <h3>Data Storage</h3>
                                <div class="grid">
                                    <ng-container *ngIf="daemon.files">
                                        <div class="col-12 lg:col-6">
                                            <p-fieldset id="data-storage-files-fieldset" legend="Files">
                                                <table style="width: 100%">
                                                    <tr *ngFor="let file of daemon.files">
                                                        <td style="width: 8rem">{{ file.filetype }}:</td>
                                                        <td>
                                                            <i>{{ filenameFromFile(file) }}</i>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </p-fieldset>
                                        </div>
                                    </ng-container>
                                    <div *ngIf="daemon.backends" class="col-12 lg:col-6">
                                        <p-fieldset id="data-storage-backends-fieldset" legend="Database Backends">
                                            <div *ngFor="let backend of daemon.backends" class="word-break-all">
                                                <i class="fa fa-database text-gray-400"></i>
                                                {{ databaseNameFromType(backend.backendType) }} ({{
                                                    backend.database
                                                }}&#64;{{ backend.host }}) with:
                                                <ul style="list-style-type: disc">
                                                    <li *ngFor="let dataType of backend.dataTypes">
                                                        <i>{{ dataType }}</i>
                                                    </li>
                                                </ul>
                                            </div>
                                        </p-fieldset>
                                    </div>
                                </div>
                            </div>

                            <!-- High Availability -->
                            <div
                                *ngIf="isDhcpDaemon(daemon)"
                                style="margin-bottom: 20px"
                                [ngClass]="{ disabled: !daemon.active }"
                            >
                                <app-ha-status [appId]="appTab.app.id" [daemonName]="daemon.name"></app-ha-status>
                            </div>

                            <!-- Loggers -->
                            <div style="margin-bottom: 20px" class="">
                                <h3>Loggers</h3>
                                <p-table [value]="daemon.logTargets">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 10rem">Logger</th>
                                            <th style="width: 7rem">Severity</th>
                                            <th>Output Location</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-logTarget>
                                        <tr>
                                            <td>{{ logTarget.name }}</td>
                                            <td align="center">{{ logTarget.severity }}</td>
                                            <td>
                                                <i *ngIf="!logTargetViewable(logTarget.output)">{{
                                                    logTarget.output
                                                }}</i>
                                                <a
                                                    *ngIf="logTargetViewable(logTarget.output)"
                                                    routerLink="/logs/{{ logTarget.id }}"
                                                    ><i>{{ logTarget.output }}</i></a
                                                >
                                            </td>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="emptymessage" let-columns>
                                        <tr>
                                            <td [attr.colspan]="3">No loggers found</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>

                            <div id="config-review-reports-div" [ngClass]="{ disabled: !daemon.active }">
                                <h3>
                                    Configuration Review Reports
                                    <app-help-tip subject="daemon configuration review section">
                                        <p>
                                            Stork server reviews the monitored servers' configurations. It flags
                                            potential configuration issues and suggests changes to these configurations
                                            to improve Stork monitoring capabilities. The review is performed using
                                            different checkers built into the Stork server. Each checker is responsible
                                            for examining a different part or aspect of the configuration. The checkers
                                            have unique names displayed in the list below as blue badges before each
                                            issue text.
                                        </p>
                                        <p>
                                            It is possible to silence specific checkers by name if their review reports
                                            are not desired in the particular deployment.
                                        </p>
                                        <p>
                                            By default, only reports that found an issue are visible. Use the toggle
                                            button to display reports from all executed checkers for a given daemon.
                                        </p>
                                    </app-help-tip>
                                </h3>
                                <app-config-review-panel [daemonId]="daemon.id"></app-config-review-panel>
                            </div>
                        </div>

                        <!-- Events -->
                        <div class="col-12 xl:col-5">
                            <h3>Events</h3>
                            <app-events-panel
                                #eventsTable
                                [filter]="{
                                    machine: appTab.app.machine.id,
                                    appType: appTab.app.type,
                                    daemonType: daemon.name
                                }"
                            ></app-events-panel>
                        </div>
                    </div>
                </ng-template>
            </p-tabPanel>
        </p-tabView>
    </div>
</div>
